<template>
  <div overflow-hidden class="app-container" v-loading="loading">
    <div class="search-container">
      <FormList :initForm="initSearchForm" v-model:formModel="searchForm"></FormList>
    </div>
    <el-card shadow="never" class="table-container">
      <!-- <template #header>
        <el-button
          type="success"
          @click="handleTableBtnClick({}, 'add')"
          ><i-ep-plus />新增</el-button
        >
      </template> -->
      <div
        class="info-container border-[#e6e6e6] border-solid border p-[10px] border-l-[5px] mb-[10px]"
      >
        总增加金额：<span>{{ tableDatasObj.add_sum }}</span
        >元 总扣除金额：<span>{{ tableDatasObj.sub_sum }}</span
        >元
      </div>
      <comTable
        :data="tableDatasCom"
        :config="tableconfig"
        :tableHeader="tableHeader"
        @link-click="handleTableBtnClick"
      >
        <template #pass_show="{ row, index }">
          <el-switch v-model="row.pass_show_com" />
        </template>
        <template #status="{ row, index }">
          <el-tag type="info" effect="dark"
            >{{ row.status === 1 ? "启用" : "禁用" }}
          </el-tag>
        </template>

        <template #order_type="{ row, index }">
          <span v-if="row.order_type == 1" style="color: royalblue">订单</span>
          <span v-else-if="row.order_type == 2" style="color: #009688">代付订单</span>
          <span v-else>-</span>
        </template>

        <template #capital_type="{ row, index }">
          <span v-if="row.capital_type == 1" style="color: lightseagreen">可用余额</span>
          <span v-else-if="row.capital_type == 2" style="color: #1482f0">冻结余额</span>
          <span v-else>-</span>
        </template>

        <template #amountCom="{ row, index }">
          <el-tag
            :type="row.handle_type.toString() === '1' ? 'danger' : 'success'"
          >
            {{ row.handle_type.toString() === "1" ? "-" : "+"
            }}{{ row.amount }}
          </el-tag>
        </template>
      </comTable>

      <pagination
        v-if="tableDatasObj.paging.total > 0"
        v-model:total="tableDatasObj.paging.total"
        v-model:page="tableDatasObj.paging.page"
        v-model:limit="tableDatasObj.paging.limit"
        @pagination="handleQuery"
      />
    </el-card>
    <!-- 弹窗 -->
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      :width="dialog.width"
      append-to-body
      @close="closeDialog"
    >
      <FormList
        v-if="initDialogForm.initKeys.length"
        v-model:formRef="formDialogId"
        v-model:formModel="formDialogModel"
        :initForm="initDialogForm"
      >
      </FormList>
      <!-- 弹窗底部操作按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleLeftClick"
            >{{ dialog.leftBtnText }}
          </el-button>
          <el-button @click="handleRightClick">{{ dialog.rightBtnText }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { watch, inject } from "vue";
import { FormInstance } from "element-plus";
import FormList from "@/components/FormList/index.vue";
import comTable from "@/components/comTable/comTable.vue";
// import { all as merchant_all } from "@/api/other/merchant";
import { all as ms_all, amount_list as list } from "@/api/other/ms";
// import { payment_stat as list } from "@/api/other/payment";
import { ProductListVO } from "@/api/other/types";
import { usePayProductStore } from "@/store";

const props = defineProps({
  id: {
    type: Number,
  },
  type: {
    type: String,
  },
});

const getFormatDate = inject("getFormatDate");
const getTimestamp: number | null = inject("getTimestamp");
const sourceOption = [];

const tableDatasObj = ref({
  list: [],
  paging: {
    limit: 20,
    page: 1,
    total: 0,
  },
  queryParams: {},
});
const loading = ref(false);

ms_all().then((res) => {
  initSearchForm.value.initKeys[0].controlAttrs.options = res.map((item) => ({
    label: item.ms_name,
    value: item.id,
  }));

  nextTick(() => {
    initSearchForm.value.initKeys[0].value = props.id;
  });
});

// 时间类型(1:创建时间；2:修改时间)
// "status": "订单状态(1:待处理；2:处理中；3:已完成；4:处理失败)",
// "return_status": "通知状态 (1:未支付；2:回调成功；3:回调失败)",
// "correct_status": "冲正状态(1:正常；2:已冲正)",
// const timeTypeOption = [
//   {
//     label: "创建时间",
//     value: "1",
//   },
//   {
//     label: "修改时间",
//     value: "2",
//   },
// ];
// const statusOption = [
//   {
//     label: "待处理",
//     value: "1",
//   },
//   {
//     label: "处理中",
//     value: "2",
//   },
//   {
//     label: "已完成",
//     value: "3",
//   },
//   {
//     label: "处理失败",
//     value: "4",
//   },
// ];
// const return_statusOption = [
//   {
//     label: "未支付",
//     value: "1",
//   },
//   {
//     label: "回调成功",
//     value: "2",
//   },
//   {
//     label: "回调失败",
//     value: "3",
//   },
// ];
// const correct_statusOption = [
//   {
//     label: "正常",
//     value: "1",
//   },
//   {
//     label: "已冲正",
//     value: "2",
//   },
// ];

const options = {
  reason: [],
  handle_type: [],
  capital_type: [],
  source: [],
  order_type: [
    {
      label: "订单",
      value: "1",
    },
    {
      label: "代付订单",
      value: "2",
    },
  ],
};

const searchForm = ref({});
const initSearchForm = ref({
  // 表单标签位置
  // labelPosition: "right",
  formAttrs: {
    // 是否内联
    inline: true,
  },
  rowAttrs: {
    // 行内表单数量
    columnsNum: 4,
  },
  // 初始化表单字段
  initKeys: [
    // {
    //   // 类型
    //   type: "select-v2",
    //   // 唯一标识
    //   key: "reason",
    //   // 表单属性
    //   formAttrs: {
    //     label: "变动原因",
    //   },
    //   // 控制属性
    //   controlAttrs: {
    //     // 提示文本
    //     placeholder: "请输入变动原因",
    //     // 是否可清空
    //     clearable: true,
    //     filterable: true,
    //   },
    //   // 控制事件
    //   controlOn: {},
    // },
    {
      // 类型
      type: "select-v2",
      // 唯一标识
      key: "ms_id",
      // 表单属性
      formAttrs: {
        label: "码商用户名",
        labelWidth: 100,
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入码商用户名",
        // 是否可清空
        clearable: true,
        filterable: true,
        options: [],
      },
      value: props.id,
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "select",
      // 唯一标识
      key: "reason",
      // 表单属性
      formAttrs: {
        label: "账变类型",
      },
      // 控制属性
      controlAttrs: {
        placeholder: "请选择账变类型",
        clearable: true,
      },
      // 选项
      options: sourceOption,
    },
    // {
    //   // 类型
    //   type: "select-v2",
    //   // 唯一标识
    //   key: "capital_type",
    //   // 表单属性
    //   formAttrs: {
    //     label: "余额类型",
    //   },
    //   // 控制属性
    //   controlAttrs: {
    //     // 提示文本
    //     placeholder: "请输入余额类型",
    //     // 是否可清空
    //     clearable: true,
    //     filterable: true,
    //   },
    //   // 控制事件
    //   controlOn: {},
    // },
    // {
    //   // 类型
    //   type: "select-v2",
    //   // 唯一标识
    //   key: "handle_type",
    //   // 表单属性
    //   formAttrs: {
    //     label: "操作类型",
    //   },
    //   // 控制属性
    //   controlAttrs: {
    //     // 提示文本
    //     placeholder: "请输入操作类型",
    //     // 是否可清空
    //     clearable: true,
    //     filterable: true,
    //   },
    //   // 控制事件
    //   controlOn: {},
    // },
    // {
    //   // 类型
    //   type: "input",
    //   // 唯一标识
    //   key: "user_name",
    //   // 表单属性
    //   formAttrs: {
    //     label: "用户名",
    //   },
    //   // 控制属性
    //   controlAttrs: {
    //     // 提示文本
    //     placeholder: "请输入用户名",
    //     // 是否可清空
    //     clearable: true,
    //     filterable: true,
    //   },
    //   // 控制事件
    //   controlOn: {},
    // },
    {
      // 订单类型
      type: "select",
      // 唯一标识
      key: "order_type",
      // 表单属性
      formAttrs: {
        label: "订单类型",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请选择订单类型",
        // 是否可清空
        clearable: true,
        filterable: true,
      },
      // 控制事件
      options: [
        {
          label: "订单",
          value: 1,
        },
        {
          label: "代付订单",
          value: 2,
        },
      ],
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "order_sn",
      // 表单属性
      formAttrs: {
        label: "订单号",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入订单号",
        // 是否可清空
        clearable: true,
        filterable: true,
      },
      // 控制事件
      controlOn: {},
    },
    // {
    //   // 类型
    //   type: "input",
    //   // 唯一标识
    //   key: "remark",
    //   // 表单属性
    //   formAttrs: {
    //     label: "流水备注",
    //   },
    //   // 控制属性
    //   controlAttrs: {
    //     // 提示文本
    //     placeholder: "请输入流水备注",
    //     // 是否可清空
    //     clearable: true,
    //     filterable: true,
    //   },
    //   // 控制事件
    //   controlOn: {},
    // },
    {
      // 类型
      type: "date-picker",
      // 唯一标识
      key: "start_time",
      // 表单属性
      formAttrs: {
        label: "开始时间",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请选择开始时间",
        // 是否可清空
        clearable: true,
        style: {
          width: "100%",
        },
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "date-picker",
      // 唯一标识
      key: "end_time",
      // 表单属性
      formAttrs: {
        label: "结束时间",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请选择结束时间",
        // 是否可清空
        clearable: true,
        style: {
          width: "100%",
        },
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "buttons",
      // 按钮
      btns: [
        {
          // 文本
          text: "搜索",
          // 控制属性
          controlAttrs: {
            // 类型
            type: "primary",
            icon: "search",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: (e: Event, formRef: FormInstance, data: object) => {
              formRef.validate((valid) => {
                if (valid) {
                  tableDatasObj.value.paging.page = 1;

                  let tempData = { ...data };

                  tempData.start_time = getTimestamp(data.start_time);
                  tempData.end_time = getTimestamp(data.end_time);

                  tableDatasObj.value.queryParams = tempData;

                  handleQuery(tableDatasObj.value.paging);
                }
              });
            },
          },
        },
        {
          // 文本
          text: "重置",
          // 控制属性
          controlAttrs: {
            icon: "refresh",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: resetQuery,
          },
        },
      ],
    },
  ],
});

// merchant_all().then((res) => {
//   initSearchForm.value.initKeys[0].controlAttrs.options = res.map((item) => ({
//     label: item.mer_name,
//     value: item.id,
//   }));
// });

// ms_all().then((res) => {
//   initSearchForm.value.initKeys[0].controlAttrs.options = res.map((item) => ({
//     label: item.ms_name,
//     value: item.id,
//   }));
//   initSearchForm.value.initKeys[2].controlAttrs.options = res.map((item) => ({
//     label: item.ms_name,
//     value: item.id,
//   }));
// });

// (async () => {
//   initSearchForm.value.initKeys[1].controlAttrs.options = (
//     await usePayProductStore().loadPayProducts()
//   ).map((item) => ({
//     label: item.pro_name,
//     value: item.id,
//   }));
// })();

/** 重置查询 */
function resetQuery(e: Event, formRef: FormInstance, data: object) {
  // 重置表单
  formRef.resetFields();
  // 查询
  tableDatasObj.value.paging.page = 1;
  tableDatasObj.value.paging.limit = 20;
  tableDatasObj.value.queryParams = { ...searchForm.value };
  const params = {
    ...tableDatasObj.value.queryParams,
    ...data,
    ...tableDatasObj.value.paging,
  };

  handleQuery(params);
}

// 表*********************************************
const tableDatasCom = computed(() => {
  return tableDatasObj.value.list.map((item: ProductListVO) => {
    return {
      ...item,
      reasonCom:
        options.reason.find((tItem) => tItem.value === item.reason.toString())?.label ||
        "-",
      mer_order_snCom: item.mer_order_sn ? item.mer_order_sn : item.p_order_sn,
      createtimeCom: getFormatDate(item.createtime),
    };
  });
});
const tableconfig = {
  // tableHeight: 480, //表格高度
  isSelection: false, //显示复选框
  isRowClick: false, //使用行点击
  isStripe: true, //隐藏斑马纹，与背景色不可同时用
  isShowSummary: false, //显示共计
  isIndex: true, //自定义序号
  isNeedPagination: true, //是否需要分页
};
const tableHeader = [
  // { label: "1,", prop: "id", width: 200 },
  // { label: "1,", prop: "mer_id", width: 200 },
  // { label: "2,", prop: "handle_type", width: 200 },
  // { label: "2,", prop: "capital_type", width: 200 },
  // { label: "账变类型", prop: "reasonCom", width: 200 },
  { label: "用户名", prop: "user_name", minWidth: 120 },
  { label: "用户昵称", prop: "nick_name", width: 200 },
  { label: "账变类型", prop: "reasonCom", minWidth: 120 },
  // { label: "", prop: "amount", width: 200 },
  // { label: "1,", prop: "source", width: 200 },
  { label: "订单类型", prop: "order_type", type: "slot", width: 120 },
  // {label: "资金类型", prop: "capital_type", type: "slot", width: 120},
  { label: "订单号", prop: "mer_order_snCom", width: 200 },
  // { label: "代付订单的订单号", prop: "p_order_sn", width: 200 },
  // { label: "32,", prop: "order_id", width: 200 },
  { label: "变动前余额", prop: "before_amount", width: 120 },
  { label: "变动金额", prop: "amountCom", width: 120, type: "slot" },
  { label: "变动后余额", prop: "after_amount", width: 120 },
  // { label: "1715414470,", prop: "updatetime", width: 200 },
  // { label: "0,", prop: "is_delete", width: 200 },
  // { label: "0,", prop: "p_id", width: 200 },
  // { label: "null,  ", prop: "order_sn", width: 200 },
  // { label: "订单的订单号", prop: "mer_order_sn", width: 200 },
  // { label: "代付订单的订单号", prop: "p_order_sn", width: 200 },
  // { label: "", prop: "p_mer_order_sn", width: 200 },
  { label: "备注信息", prop: "remark", width: 200 },
  { label: "创建时间", prop: "createtimeCom", width: 200 },
];

/**
 * 查询
 */
function handleQuery(paging: { page: number; limit: number }) {
  loading.value = true;
  list({
    ...tableDatasObj.value.paging,
    ms_id: props.id,
    ...tableDatasObj.value.queryParams,
    capital_type: props.type ? (props.type === "yuemingxi" ? 1 : 2) : "",
  })
    .then((res) => {
      tableDatasObj.value.list = res.list;
      tableDatasObj.value.paging.total = res.total;
      tableDatasObj.value.add_sum = res.add_sum;
      tableDatasObj.value.sub_sum = res.sub_sum;

      options.reason = Object.keys(res.reason_name).map((key) => ({
        label: res.reason_name[key],
        value: key,
      }));
      options.handle_type = Object.keys(res.handle_type_name).map((key) => ({
        label: res.handle_type_name[key],
        value: key.toString(),
      }));
      options.capital_type = Object.keys(res.capital_type_name).map((key) => ({
        label: res.capital_type_name[key],
        value: key.toString(),
      }));
      options.source = Object.keys(res.source_name).map((key) => ({
        label: res.source_name[key],
        value: key.toString(),
      }));

      Object.keys(options).map((key) => {
        const item = initSearchForm.value.initKeys;
        const i = item.findIndex((item) => item.key === key);

        // if (i > -1) {
        //   const control = initSearchForm.value.initKeys[i].controlAttrs;
        //   if (!(control.options && control.options.length)) {
        //     initSearchForm.value.initKeys[i].controlAttrs.options = options[key];
        //   }
        // }

        if (i > -1) {
          const control = initSearchForm.value.initKeys[i].controlAttrs;
          if (!(control.options && control.options.length)) {
            initSearchForm.value.initKeys[i].controlAttrs.options = options[key];
          }
        }
      });
    })
    .finally(() => {
      loading.value = false;
    });
  // if (tableDatasObj.paging.typeCode) {
  // loading.value = true;
  // getDictPage(queryParams)
  //   .then(({ data }) => {
  //     dictList.value = data.list;
  //     total.value = data.total;
  //   })
  //   .finally(() => (loading.value = false));
  // }
}

// const statInfo = ref({});
// const dealSuccessRateCom = computed(() => {
//   return statInfo.value.total_amount
//     ? ((statInfo.value.success_amount * 100) / statInfo.value.total_amount).toFixed(2)
//     : 0;
// });
// // const orderSuccessRateCom.value = computed(() => {
// //   return statInfo.value.period_count
// //     ? statInfo.value.period_success_count * 100 / statInfo.value.period_count
// //     : 0;
// // });

// // 统计
// function loadstat() {
//   loading.value = true;
//   stat()
//     .then((res) => {
//       statInfo.value = res;
//     })
//     .finally(() => (loading.value = false));
// }

// loadstat();
// 完*********************************************

const initDialogForm = ref({
  // 表单标签位置
  formAttrs: {
    // 是否内联
    // inline: true,
    labelPosition: "top",
  },
  rowAttrs: {
    // 行内表单数量
    columnsNum: 1,
  },
  // 初始化表单字段
  initKeys: <any>[],
});

const isHasOptions = [
  {
    // 标签
    label: "关闭",
    // 值
    value: 0,
  },
  {
    // 标签
    label: "开启",
    // 值
    value: 1,
  },
];

function handleTableBtnClick(row: object, title: string) {
  dialog.type = title;
  dialog.visible = true;

  if (title === "add") {
    // 新增支付产品
    dialog.title = "新增支付产品";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";

    initDialogForm.value.initKeys.push(
      ...[
        // 产品名称
        // 通道代码
        // 通道显示
        // 状态
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "产品名称",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入产品名称",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "通道代码",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入通道代码",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "switch",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "通道显示",
          },
          // 控制属性
          controlAttrs: {
            value: false,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "switch",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "状态",
          },
          // 控制属性
          controlAttrs: {
            value: false,
          },
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "channel-allocation") {
    // 渠道配置
    dialog.title = "渠道配置";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";

    initDialogForm.value.initKeys.push(
      ...[
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "自定义引导语",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            // placeholder: "用户名/昵称/手机号",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "支付页面是否提交姓名",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "锁码",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "订单金额浮动",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "订单浮动金额个数",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            // placeholder: "用户名/昵称/手机号",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "订单金额不下浮(优先)",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "订单金额不上浮",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "确认收款是否需要确认安全码",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "自动刷新时是否只显示未支付订单",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "确认收款时是否确认信息",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "码商设置收款码金额区间",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "收款码收款最小金额(码商设置收款码金额区间关闭后才有作用)",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            // placeholder: "用户名/昵称/手机号",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "qqq5",
          // 表单属性
          formAttrs: {
            label: "收款码收款最大金额(码商设置收款码金额区间关闭后才有作用)",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            // placeholder: "用户名/昵称/手机号",
            // 是否可清空
            clearable: true,
          },
          // 控制事件
          controlOn: {},
        },
        {
          // 类型
          type: "select",
          // 唯一标识
          key: "qqq1",
          // 表单属性
          formAttrs: {
            label: "是否展示通道",
          },
          // 控制属性
          controlAttrs: {
            value: 0,
          },
          // 选项
          options: isHasOptions,
        },
      ]
    );
  } else if (title === "rate-adjustment") {
    // 调整费率
    dialog.title = "调整费率";
    dialog.leftBtnText = "上 调";
    dialog.rightBtnText = "下 调";
    initDialogForm.value.initKeys.push(
      ...[
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "rate",
          // 表单属性
          formAttrs: {
            // label: "自定义引导语",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入需要调整的费率",
            // 是否可清空
            clearable: true,
          },
          appendTxt: "%",
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "set-rate") {
    // 设置费率
    dialog.title = "调整码商费率（统一按照百分比计算）";
    dialog.leftBtnText = "确 定";
    dialog.rightBtnText = "取 消";
    initDialogForm.value.initKeys.push(
      ...[
        {
          // 类型
          type: "input",
          // 唯一标识
          key: "rate",
          // 表单属性
          formAttrs: {
            label: "自定义引导语",
          },
          // 控制属性
          controlAttrs: {
            // 提示文本
            placeholder: "请输入需要设置的费率",
            // 是否可清空
            clearable: true,
          },
          appendTxt: "%",
          // 控制事件
          controlOn: {},
        },
      ]
    );
  } else if (title === "clearing-rate") {
    dialog.visible = false;

    ElMessageBox.confirm("确定要将所有码商费率清0吗？", "将所有码商费率清0", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      // 访问接口；刷新列表
    });
  }
}

// 弹窗对象
const dialog = reactive({
  visible: false,
  type: "user-form",
  width: 800,
  title: "",
  leftBtnText: "确 定",
  rightBtnText: "取 消",
});

let formDialogId = ref<FormInstance>();

/**
 * 关闭弹窗
 *
 * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
 */
function closeDialog() {
  // formDialogId.value?.resetFields();
  // formDialogId.value?.clearValidate();
  formDialogId.value = {};
  formDialogModel.value = {};
  initDialogForm.value.initKeys.splice(0);
  dialog.visible = false;
}

let formDialogModel = ref({});

function handleLeftClick() {
  // formDialogId.

  closeDialog();
}

function handleRightClick() {
  // formDialogId.
  closeDialog();
}

onMounted(() => {
  tableDatasObj.value.queryParams = { ...searchForm.value };

  handleQuery(tableDatasObj.value.paging);
});
</script>

<style lang="scss" scoped>
.info-container {
  font-size: var(--el-font-size-extra-small);

  span {
    background-color: #1e9fff;
    display: inline-block;
    padding: 0 10px;
    margin: 0 5px;
    color: #fff;
  }
}
</style>
